<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>自定义报表管理</title>
	<link rel="shortcut icon" th:href="@{/images/logo.ico}"/>
   <link  th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css">
   <style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
	#reportContainer  iframe{border:1px solid #cccccc;}
	.mask{
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 100;
			transform: translate(-50%, -50%);
			display: none;
			width: 400px;
			height: 200px;
			padding: 20px; 
			background: #EBEBEB;
			border: 1px solid #ccc;
		}
		.confirm{
			color: #29abe2;
		}
		.name,.choose{
			margin-top: 30px;
		}
		.name input{
			width: 100%;
			height: 35px;
			-webkit-appearance:none;
  			-moz-appearance: none;
			border-radius:4px;
			border:1px solid #c8cccf;
			outline:0;
		}
		.choose{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.choose div{
			background-color: #29abe2;
    		padding: 6px 30px;
    		color: white;
    		border-radius: 5px;
		}
		#saveReport:focus,#saveAsReport:focus{
			outline:none;
		}
		#saveReport:hover,#saveAsReport:hover{
			background:red;
		}
		.cancel,.store{
			cursor:pointer;
		}
		
		
	.chromeframe {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}
	#loader-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999999;
	}
	#loader {
		display: block;
		position: relative;
		left: 50%;
		top: 50%;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-webkit-animation: spin 2s linear infinite;
		-ms-animation: spin 2s linear infinite;
		-moz-animation: spin 2s linear infinite;
		-o-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
		z-index: 1001;
	}
	#loader:before {
		content: "";
		position: absolute;
		top: 5px;
		left: 5px;
		right: 5px;
		bottom: 5px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-webkit-animation: spin 3s linear infinite;
		-moz-animation: spin 3s linear infinite;
		-o-animation: spin 3s linear infinite;
		-ms-animation: spin 3s linear infinite;
		animation: spin 3s linear infinite;
	}
	#loader:after {
		content: "";
		position: absolute;
		top: 15px;
		left: 15px;
		right: 15px;
		bottom: 15px;
		border-radius: 50%;
		border: 3px solid transparent;
		border-top-color: #FFF;
		-moz-animation: spin 1.5s linear infinite;
		-o-animation: spin 1.5s linear infinite;
		-ms-animation: spin 1.5s linear infinite;
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
	}
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	#loader-wrapper .loader-section {
		position: fixed;
		top: 0;
		width: 51%;
		height: 100%;
		background: #467699;
		z-index: 1000;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	#loader-wrapper .loader-section.section-left {
		left: 0;
	}
	#loader-wrapper .loader-section.section-right {
		right: 0;
	} 
	.loaded #loader-wrapper .loader-section.section-left {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	.loaded #loader-wrapper .loader-section.section-right {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}
	.loaded #loader {
		opacity: 0;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	.loaded #loader-wrapper {
		visibility: hidden;
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: all 0.3s 1s ease-out;
		transition: all 0.3s 1s ease-out;
	}
	.no-js #loader-wrapper {
		display: none;
	}
	.no-js h1 {
		color: #222222;
	}
	#loader-wrapper .load_title {
		font-family: 'Open Sans';
		color: #FFF;
		font-size: 19px;
		width: 100%;
		text-align: center;
		z-index: 9999999999999;
		position: absolute;
		top: 60%;
		opacity: 1;
		line-height: 30px;
	}
	#loader-wrapper .load_title span {
		font-weight: normal;
		font-style: italic;
		font-size: 13px;
		color: #FFF;
		opacity: 0.5;
	}
	</style>
	<script th:src="@{/scripts/node_modules/powerbi-client/dist/powerbi.js}"></script>
	<script th:src="@{/scripts/node_modules/jquery/dist/jquery.js}"></script>
	<script th:src="@{/scripts/reportmodel/index.js}" ></script>
	<script th:inline="javascript">
	
// 		$(function(){
// 			var tt=[[${pbMap.collectionName}]];
// 			alert(tt);
// 		});
		function _Embed_BasicEmbed(scp) {
			// Read embed application token from textbox
			var txtAccessToken = $('#txtAccessToken').val();
			// Read embed URL from textbox
			var txtEmbedUrl = $('#txtReportEmbed').val();
			// Read report Id from textbox
			var txtEmbedReportId = $('#txtEmbedReportId').val();
			// Get models. models contains enums that can be used.
			var models = window['powerbi-client'].models;
			// We give All permissions to demonstrate switching between View and Edit mode and saving report.
			var permissions = models.Permissions.All;
			var config = {
				type : 'report',
				accessToken : txtAccessToken,
				embedUrl : txtEmbedUrl,
				id : txtEmbedReportId,
				permissions : permissions,
				viewMode: models.ViewMode.Edit,
				settings : {
					filterPaneEnabled : true, //是否屏蔽筛选器
					navContentPaneEnabled : true//是否显示页面导航
				}
			};
			var reportContainer = document.getElementById('reportContainer');
			var report = powerbi.embed(reportContainer, config);
			setTimeout(function(){
				$('#loader-wrapper').hide();
			},2000)
			report.refresh();
			
		}
		
	</script> 
</head>
<body>
 <div id="embed-and-interact-steps-wrapper">
	   <input type="hidden" th:value="${pbMap.collectionName}" id="txtAccessWCN"/>
	   <input type="hidden" th:value="${pbMap.displayName}" id="txtdisplayName"/>
	   
	   <input type="hidden" th:value="${pbMap.workspaceID}" id="txtAccessWID" />
		<input type="hidden"  th:value="${pbMap.access_key}" id="txtAccessKey"/>
		<input type="hidden" th:value="${pbMap.importID}" id="txtAccessimportID"/>
		<input id="scp" type="hidden" th:value="${pbMap.model}"/>
		<input type="hidden" id="txtEmbedReportId" th:value="${pbMap.reportID}" /> 
		<input type="hidden" id="txtAccessToken" th:value="${token}" />
		<input type="hidden" id="txtprocessorId" th:value="${pbMap.processorId}" />
		<input type="hidden" id="txtpage" th:value="${pbMap.page}" />
		<input type="hidden" id="txtmodel" th:value="${pbMap.model}" />
		<input type="hidden" id="txtReportEmbed" value="https://embedded.powerbi.cn/appTokenReportEmbed" />
		<input type="button" id="saveReport" class="saveReport"  value="保存"  style="position: absolute;top: 2px; left: 11px;height: 39px;border: none;background: rgb(234, 234, 234);font-size: 12px;width: 3%;"/>
		<input type="button" id="saveAsReport" class="saveAsReport"  value="" style="position: absolute;right: 0px;height: 40px;border: none;background: rgb(234, 234, 234);font-size: 12px;width: 4%;cursor:default" />
<!-- 		<input type="button" id="changeReport" class="changeReport" value="切换" style="position: absolute;left: 120px;height: 40px;border: none;background: rgb(234, 234, 234);font-size: 12px;line-height: 40px;width: 4%;"> -->
<!-- 		<ul style="width: 150px;padding: ab;position: absolute;top: 40px;left: 90px;background: #fff;list-style:none;display: none;"> -->
<!-- 	    	<li style="height:35px;line-height: 35px;padding-left: 10px;">报表</li> -->
<!-- 	    	<li style="line-height: 35px;padding-left: 10px;height:35px;">仪表盘</li> -->
<!-- 	    	<li style="line-height: 35px;padding-left: 10px;height:35px;">数据集</li> -->
<!-- 	    	<li style="line-height: 35px;padding-left: 10px;height:35px;">正文表</li> -->
<!-- 	    	<li style="height:35px;line-height: 35px;padding-left: 10px;">评论表</li> -->
<!-- 		</ul> -->
		
		
		<div class="bottomPanel">
			<div id="embedArea">
				<div class="editorTitle">
					<!-- <div class="editorTitleText">Embedded report</div> -->
				</div>
				<div id="reportContainer"></div>
			</div>
		</div>
	</div>
<!-- 	<div class="mask"> -->
<!-- 		<p class="confirm">请输入您保存文件的名称:</p> -->
<!-- 		<p class="name"> -->
<!-- 			<input type="text" id="fileName"> -->
<!-- 		</p> -->
<!-- 		<div class="choose">	 -->
<!-- 			<div class="cancel">取消</div> -->
<!-- 			<div class="store">确定</div> -->
<!-- 		</div> -->
<!-- 	</div> -->
	
	<div id="loader-wrapper"> 
    	<div id="loader"></div> 
    	<div class="loader-section section-left"></div> 
    	<div class="loader-section section-right"></div> 
    	<div class="load_title">正在加载...</div> 
	</div> 
</body>
</html>
